<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>

</head>
<body>
    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
    </ul>
    <script>
        // jq里的事件 
        // 一、直接使用事件 ，绑定事件 。
        // 原生js  ele.onclick = function(){}
        // $("li").mouseover(function(){
        //     console.log("点击了");
        // })

        // $("li").eq(1).hover(function(){
        //     // hover 时候触发
        //     $(this).css("background","red");
        // },function(){
        //     // 离开的时候触发
        //     $(this).css("background","blue");
        // })

        // 二、事件绑定 : 类似 addEventListener方式绑定事件
        // on(事件名,事件函数);
        // 1.直接绑定事件 
        // $("li").eq(1).on("click",function(){
        //     console.log(1111);
        // })

        // 2.事件委托
        // $("ul").on("click","li",function(){
        //     console.log("事件委托触发的函数");
        // })

        // 3.可以传递数据

        // $("ul").on("click","li",{myid:1},function(e){
        //     console.log("事件委托触发的函数",e.data);
        // })

        // 4.解除事件绑定 off("事件名称","事件函数");

        // var fn = function(){
        //     console.log("fn执行了");
        // }
        // var fn2 = function(){
        //     console.log("fn2执行了");
        // }
        // // 链式操作
        // $("li").eq(1).css("background","red").on("click",fn).on("click",fn2);

        // // 解除事件绑定
        // $("li").eq(1).off("click",fn2);


        // 5.one绑定事件 ： 绑定的事件只会执行一次；
        // once 绑定事件
        $("li").eq(1).css("background","red").one("click",function(){
            console.log("点击了")
        })
        







    </script>
</body>
</html>